<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin: 6px;
        }
    </style>
</head>
<body>
    <div id="root">
    </div>
        <h1 :style="{opacity}">欢迎学习Vue</h1>
        <button @click="stopChange">停止</button>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            //模板必须用<div>开头，模板的内容会全部的替换掉整个root的内容
            //`这个符号支持换行
            // template:`
            //     <div>
            //         <h1 :style="{opacity}">欢迎学习Vue</h1>
            //         <h1 :style="{opacity}">欢迎学习Vue</h1>
            //         <h1 :style="{opacity}">欢迎学习Vue</h1>
            //         <h1 :style="{opacity}">欢迎学习Vue</h1>
            //         <h1 :style="{opacity}">欢迎学习Vue</h1>
            //     </div>
            // `,
            data:{
                opacity:1
            },
            computed:{
            },
            methods:{
                
            },
            watch:{
            },
            filters:{
            },
            directives:{
            },
            //初始化生命周期和事件已经完成，但数据代理还没有开始
            beforeCreate() {
                //这个时候this还没有_data，还读不到data的数据
                console.log(this)
                //调试模式的时候代码运行到这里的时候会暂停
                // debugger
            },
            //初始化数据代理数据检测完成，还没有生成虚拟dom
            created() {
                //这个时候this可以读到data的数据了
                console.log(this)
                // debugger
            },
            //生成虚拟dom完成，还没有挂载真实dom
            beforeMount() {
                console.log(this)
                // debugger
            },
            //挂载真实dom完成
            mounted(){
                console.log(this)
                // debugger
            },
            //页面数据更改前。此时，页面是旧的，数据是新的
            beforeUpdate() {
                console.log(this)
                // debugger
            },
            //页面数据更改完成。此时，页面是新的，数据是新的
            updated() {
                console.log(this)
                // debugger
            },
            //调用vm.$destroy()来数据销毁前，不会销毁dom绑定的事件
            beforeDestroy() {
                console.log(this)
                // debugger
            },
            //调用vm.$destroy()来数据销毁完成后
            destroyed() {
                console.log(this)
                // debugger
            }
        })
        //通过外部的定时器实现(不推荐)
        // setInterval(() => {
        //     vm.opacity -= 0.01
        //     if(vm.opacity<=0){
        //         vm.opacity = 1
        //     }
        // }, 16);
    </script>    
</body>
</html>